
input.js-switch:focus{ outline:none;}
.js-switch{
    width: 52px;
    height: 32px;
    position: absolute;
    z-index: 2;
    background: 0 0;
    -webkit-appearance: none;
    outline: 0;
    border:1px #ccc solid;outline:none;
    margin: 0;
}
.js-switch:hover{
    border:none;
    margin: 0;
}
.js-switch:valid{
    border:none;
    margin: 0;
}
.js-switch:checked::before{
    border-color: #64bd63;
    -webkit-box-shadow: #64bd63 0 0 0 16px inset;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border .4s,box-shadow .4s,background-color 1.2s;
    -webkit-transition: border .4s,-webkit-box-shadow .4s,background-color 1.2s;
    background-color: #64bd63;
}
.js-switch::before{
    content: '';
    width: 50px;
    height: 30px;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-color: #dfdfdf;
    -webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    -webkit-transition: border .4s,-webkit-box-shadow .4s;
    transition: border .4s,box-shadow .4s;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}
.js-switch:checked::after{
    left: 21px;
}
.js-switch::after{
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    top: 1px;
    left: 0;
    border-radius: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -webkit-transition: left .2s;
    transition: left .2s;
}
.btn-rounded{
    border-radius: 50px;
}
/**
 * 众*创*社*区*w w w . z c s q u . c o m 
 */
